<template>
  <div class="content">
    <div class="header">
      <div class="loginImg">
        <img src="../../../../assets/imgs/logo1.png" alt />
      </div>
      <img
        class="image_close"
        src="../../../../assets/imgs/header_close.png"
        alt
        @click="back"
      />
    </div>
    <div class="linetop"></div>
    <div class="left-wrap">
      <div class="left-title-wrap">
        <div class="title-logo"></div>
        <div class="left-title">{{ showLeftTitle() }}</div>
      </div>
      <div class="day-list" ref="dayListDiv">
        <div class="day-line" :style="leftLineStyle"></div>

        <div class="day-wrap" v-for="(item, index) in dataList" :key="index">
          <div class="day-title">
            <div v-if="index === 0" class="line-white">
              <div class="day-dot"></div>
            </div>
            <div v-if="index > 0" class="day-dot"></div>
            {{ item.dateString }}
          </div>
          <div class="day-subtitle">{{ returnDayTitle(index) }}</div>
          <!-- 开始遍历cell -->
          <div
            :class="
              cellItem.selected
                ? 'video-cell video-cell-select'
                : 'video-cell video-cell-unselect'
            "
            @click="clickCell(cellItem)"
            v-for="(cellItem, cellIndex) in item.schedules"
            :key="cellIndex"
          >
            <div class="icon"></div>
            <div class="title">
              {{ cellItem.title }}
            </div>
            <div class="subtitle">
              {{ returnSubTitle(cellItem) }}
            </div>
          </div>
        </div>

        <div class="time-line-end">
          <div class="day-dot"></div>
          <div class="end-title">END</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import api from "servicePath/index";
import { mapState } from "vuex";
export default {
  data() {
    return {
      leftLineStyle: "height:200px",
      dataList: [],
      selectVideo: null
    };
  },
  computed: {
    ...mapState(["lang", "userInfo"])
  },
  mounted() {
    this.handleGetScheduleList();
  },
  watch: {
    lang() {
      this.handleGetScheduleList();
    }
  },
  methods: {
    showLeftTitle() {
      var title = this.$t("vr.schedule");
      return title.toUpperCase();
    },
    returnSubTitle(cellItem) {
      if (cellItem.company && cellItem.company.length) {
        return cellItem.expert + " | " + cellItem.company;
      }
      return cellItem.expert;
    },
    back() {
      this.$router.go(-1);
    },
    returnDayTitle(index) {
      var title = "";
      if (index === 0) {
        title = this.$t("vr.scheduleDay1");
      } else if (index === 1) {
        title = this.$t("vr.scheduleDay2");
      } else if (index === 2) {
        title = this.$t("vr.scheduleDay3");
      }
      return title;
    },
    clickCell(item) {
      // window.location.href = "http://localhost:8080/#/pc/home?videoIndex=3";
      console.log(item.title);
      this.selectVideo = item;

      this.dataList.map(item => {
        item.schedules.map(object => {
          if (object == this.selectVideo) {
            // console.log(object.id, "true");
            object.selected = true;
          } else {
            object.selected = false;
            // console.log(object.id, "false");
          }
        });
      });

      this.$nextTick(() => {
        // this.$refs.videoPlay.load(this.selectVideo.videoUrl);
      });

      this.$forceUpdate();

      window.location.href = this.selectVideo.videoUrl;
    },
    getFormatDate(time) {
      var date = new Date(time * 1000);
      var YY = date.getFullYear();
      var MM =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();

      return MM + "/" + DD + "/" + YY;
    },
    async handleGetScheduleList() {
      console.log(!this.userInfo);
      if (!this.userInfo) {
        this.$router.push({
          path: `login`
        });
        return false;
      }

      const params = {};
      const loading = this.$loading();
      const res = await api.getScheduleList(params, this.lang);

      this.dataList = res.data;

      loading.close();

      for (var i = 0; i < this.dataList.length; i++) {
        var item = this.dataList[i];
        //格式化日期
        item.dateString = this.getFormatDate(item.date);

        item.schedules.map(object => {
          // if (index === 0) {
          //   if (i === 0) {
          //     object.selected = true;
          //   }
          //   this.selectVideo = object;
          // } else {
          object.selected = false;
          // }
        });
      }

      this.$nextTick(() => {
        let height = this.$refs.dayListDiv.offsetHeight;
        this.leftLineStyle = "height:" + height + "px;";
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
.header {
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 10px;
  padding-bottom: 10px;
  // background-color: #409eff;
}
.loginImg {
  img {
    height: 26px;
    vertical-align: middle;
  }
}
.image_close {
  width: 22px;
  height: 22px;
}
.linetop {
  width: 100%;
  height: 1px;
  background: #979797;
}
.left-wrap {
  width: 100%;
  height: auto;
  padding-left: 20px;
  padding-right: 20px;
  // overflow: scroll;
  // background-color: #678123;
  .left-title-wrap {
    width: 100%;
    height: 33px;
    // background-color: #ff00ff;
    margin-top: 20px;
    display: flex;
    align-items: center;
    .title-logo {
      width: 27px;
      height: 27px;
      background: url("../../../../assets/imgs/schedule-menu.png") no-repeat;
      background-size: cover;
    }
    .left-title {
      width: 150px;
      height: 33px;
      font-size: 24px;
      font-weight: 600;
      color: #555555;
      line-height: 33px;
      background-color: #ffffff;
      margin-left: 10px;
    }
    .left-title:first-letter {
      color: #ff3265;
    }
  }
  .day-list {
    width: 100%;
    height: auto;
    // max-height: 700px;
    overflow: scroll;
    margin-left: 7.5px;
    // background-color: #909312;
    .day-line {
      width: 1px;
      height: 100%;
      // height: 50%;
      background-color: #d8d8d8;
      position: absolute;
      margin-left: 6px;
      z-index: -100;
    }
    .day-wrap {
      width: 100%;
      height: auto;
      margin-bottom: 30px;
      // background-color: #ff0000;

      .day-title {
        width: 270px;
        height: 30px;
        line-height: 30px;
        font-size: 24px;
        font-weight: 600;
        color: #555555;
        display: flex;
        // background-color: #ff00ff;
        .line-white {
          width: 13px;
          height: 22px;
          // margin-top: 9px;
          margin-right: 17px;
          background-color: #ffffff;
          .day-dot {
            width: 13px;
            height: 13px;
            background: #d8d8d8;
            border-radius: 8px;
            margin-top: 9px;
          }
        }
        .day-dot {
          width: 13px;
          height: 13px;
          background: #d8d8d8;
          border-radius: 8px;
          margin-top: 9px;
          margin-right: 17px;
        }
      }
      .day-subtitle {
        margin-left: 30px;
        width: 250px;
        height: 30px;
        font-size: 20px;
        font-weight: 600;
        color: #555555;
        line-height: 28px;
        margin-top: 3px;
        margin-bottom: 15px;
      }
      .video-cell-select {
        background-color: rgb(255, 84, 132);
        .icon {
          width: 7px;
          height: 12px;
          background: #ff5484;
          margin-left: 10px;
          background: url("../../../../assets/imgs/arrow-white.png") no-repeat;
          background-size: cover;
        }
        .title {
          width: auto;
          height: auto;
          font-size: 16px;
          font-weight: 600;
          color: #ffffff;
          line-height: 22px;
          margin-left: 25px;
          margin-right: 5px;
          margin-top: -17px;
        }
        .subtitle {
          width: 250px;
          height: auto;
          font-size: 9px;
          font-weight: 400;
          color: #ffffff;
          line-height: 13px;
          margin-left: 25px;
          margin-top: 5px;
        }
      }
      .video-cell-unselect {
        background: rgba($color: #d8d8d8, $alpha: 0.37);
        .icon {
          width: 7px;
          height: 12px;
          background: #ff5484;
          margin-left: 10px;
          background: url("../../../../assets/imgs/arrow.png") no-repeat;
          background-size: cover;
        }
        .title {
          width: auto;
          height: auto;
          font-size: 16px;
          font-weight: 600;
          color: #555555;
          line-height: 22px;
          margin-left: 25px;
          margin-right: 5px;
          margin-top: -17px;
        }
        .subtitle {
          width: 250px;
          height: auto;
          font-size: 9px;
          font-weight: 400;
          color: #aeaeae;
          line-height: 13px;
          margin-left: 25px;
          margin-top: 5px;
        }
      }
      .video-cell {
        width: auto;
        height: auto;
        min-height: 50px;
        border-radius: 4px;
        margin-left: 30px;
        margin-right: 10px;
        margin-bottom: 15px;
        padding-top: 10px;
        padding-bottom: 10px;
      }
    }

    .time-line-end {
      width: 280px;
      height: 30px;
      background-color: #ffffff;
      display: flex;
      // align-items: flex-start;

      .day-dot {
        width: 13px;
        height: 13px;
        background: #d8d8d8;
        border-radius: 8px;
        // margin-top: 9px;
        margin-right: 17px;
      }
      .end-title {
        width: 205px;
        height: 28px;
        font-size: 12px;
        font-weight: 400;
        color: #555555;
        line-height: 17px;
      }
    }
  }
}
</style>
